<template>
  <div class="screen">
    <div class="inline-box" >
      <div ref="screenList" class="inline">
        <!--<el-checkbox :indeterminate="isIndeterminate"
                     v-model="checkAll"
                     @change="handleCheckAllChange">全部
        </el-checkbox>-->
        <el-checkbox-group v-model="checkboxList"
                           @change="handleCheckedChange">
          <el-checkbox v-for="(item, index) in list"
                       :key="index"
                       :label="item.name">
            {{matchingName(item.name)}}
          </el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
  </div>
</template>

<script>
import { mapFields } from 'vuex-map-fields'

export default {
  name: 'checkboxItem',
  props: {
    type: {
      type: String
    },
    list: {
      type: Array,
      default: () => ([])
    },
    secretData: {
      type: Array,
      default: () => ([])
    },
    safekeepingData: {
      type: Array,
      default: () => ([])
    }
  },
  data () {
    return {
      checkAll: false,
      isIndeterminate: true,
      checkboxList: []
    }
  },
  computed: {
    ...mapFields('currencyDic/getCategoryAll', {
      categoryAll: 'retrieved' // 所有门类
    })
  },
  methods: {
    handleCheckAllChange (val) {
      // 全选
      if (val) {
        this.checkboxList = []
        this.list.map(item => {
          this.checkboxList.push(item.name)
        })
      } else {
        this.checkboxList = []
      }
      this.isIndeterminate = false
      this.$emit('change', this.checkboxList)
    },
    handleCheckedChange (value) {
      const checkedCount = value.length
      this.checkAll = checkedCount === this.list.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.list.length
      this.$emit('change', this.checkboxList)
    },
    matchingName (id) {
      let name = ''
      if (this.type === 'id_category') {
        // 档案门类
        this.categoryAll.map(item => {
          if (item.id === id) {
            name = item.categoryName
          }
        })
      }
      // 归档年度
      if (this.type === 'gdnd') {
        name = id
      }
      // 保管期限
      if (this.type === 'bgqx') {
        this.safekeepingData.map(item => {
          if (item.dictValue.toUpperCase() === id.toUpperCase()) {
            name = item.dictLabel
          }
        })
      }
      // 密级
      if (this.type === 'mj') {
        this.secretData.map(item => {
          if (item.dictValue.toUpperCase() === id.toUpperCase()) {
            name = item.dictLabel
          }
        })
      }
      if (!name) {
        name = id
      }
      return name
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "../../styles/mixin";
  .screen {
    @include fj;
    align-items: flex-start;
    padding-right: 20px;
    .inline-box{
      width: calc(100% - 60px);
      overflow: hidden;
      transition: height 0.4s linear;
    }
    .inline {
      @include fj(flex-start);
    }
  }
</style>
